<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		 <script src="../js/jquery-1.11.1(1).js"></script>
		<!-- 
		元素属性操作：针对固定属性，附加属性操作
		元素   固定属性---清楚：元素是否可用属性【w3c元素出现设置属性】
		            附加属性---清楚：表单为主，附加属性checked，disabled...
		prop（）  ----功能与attr类似，附加属性，针对表单，默认选中
		removeProp()   ---功能：与removeAttr类似，附加属性，针对表单，移除选中
		 -->
	</head>
	<body>
		<h1>prop()和removeProp()函数使用</h1>
		<!-- 复选框，默认选中  id="myCheckBox"
		 三个按钮    id="getProBtn"    获取属性
		            id="setProBtn"      设置属性
					id="removeProBtn"    移除属性
          弹出显示文字   div id="output"
		 -->
		 <input type="checkbox" id="myCheckBox" checked />
		 <button id="getProBtn">获取属性</button>
		 <button id="setProBtn">设置属性</button>
		 <button id="removeProBtn">移除属性</button>
		 <div id="output">弹出显示文字</div>
		 
		 <script>
			 /* prop()  点击---获取属性----打印复选框的值
			                               复选框的值是：+变量
			    prop("checked")--input元素---checked属性---属性值bool【true，false】							   
			 */
			$("#getProBtn").click(function(){
				//prop()获取元素的附加属性---input中checked
				var isChecked=$("#myCheckBox").prop("checked");
				$("#output").text("复选框的值是："+isChecked);
			});
			
			//prop（"checked","false"）  取消选中
			$("#setProBtn").click(function(){
				$("#myCheckBox").prop("checked",false);
				$("#output").text("复选框的值是：false");
			});
			//removeProp（"checked"）   取消选中---删除  checked属性
			$("#removeProBtn").click(function(){
				$("#myCheckBox").removeProp("checked");
				$("#output").text("复选框的属性已经移除~");
			});
		 </script>
	</body>
</html>